<template>
  <div>
    <el-dialog :visible.sync="open" @close="close" :title="title" width="80%" append-to-body>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
        <el-form-item label="预案类型" prop="aerodromeid">
          <el-input type="text" v-model="queryParams.keyword" placeholder="请输入关键词" :style="{ width: '100%' }"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="list">
        <el-table-column label="预案名称" align="center" prop="planName" />
        <el-table-column label="当前版本" align="center" prop="version" />
        <el-table-column label="事件类型" align="center" prop="eventType" />
        <el-table-column label="事件等级" align="center" prop="eventGrade" />
        <el-table-column label="所属部门" align="center" prop="deptName" />
        <el-table-column label="操作" align="center" fixed="right" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-check" @click="handleSelectPlan(scope.row)">选择 </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getPlans" />
    </el-dialog>
    <div>
      <el-dialog :visible.sync="responseLevelShow" @close="responseLevelShow = false" title="选择响应级别" width="400px" append-to-body>
        <el-form ref="queryForm" size="small" label-width="80px">
          <el-form-item label="响应级别" prop="aerodromeid">
            <el-select v-model="responseLevel" placeholder="请选择响应级别">
              <el-option label="请选择" value="" />
              <el-option v-for="dict in responseLevels" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="responseLevelShow = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import dialogMixin from "@/mixins/dialogMixin";
import * as PlanApi from "@/api/plan/plan.js";
import { getPlanList } from "@/api/plan/caacPlan.js";

export default {
  name: "PlanPickerDialog",
  mixins: [dialogMixin],
  dicts: ["plantypecode_dict"],
  components: {},
  props: [],
  data() {
    return {
      queryParams: {
        keyword: "",
      },
      title: "",
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      responseLevel: "",
      responseLevelShow: false,
      responseLevels: [
        {
          label: "Ⅰ级响应",
          value: 1,
        },
        {
          label: "Ⅱ级响应",
          value: 2,
        },
        {
          label: "Ⅲ级响应",
          value: 3,
        },
        {
          label: "Ⅳ级响应",
          value: 4,
        },
      ],
      plan: {},
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getPlans();
  },
  mounted() {},
  methods: {
    getPlans() {
      getPlanList(this.queryParams).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    showDialog() {
      this.title = "选择预案";
      this.open = true;
    },
    handleQuery() {
      this.getPlans();
    },
    handleSelectPlan(data) {
      this.plan = data;
      this.responseLevelShow = true;
    },
    handleConfirm() {
      this.$emit("planSelected", this.plan, this.responseLevel);
      this.responseLevelShow = false;
      this.open = false;
    },
  },
};
</script>
<style></style>
